<template>

    <el-container>

        <el-header style="height: 40px;">
            <el-row class="block-col-2">
                <el-col :span="12">
                    <el-select @change="siteChange" v-model="curSiteId" filterable placeholder="请选择站点">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                </el-col>
                <el-col :span="12">
                    <el-date-picker @change="dateChange"  v-model="s_date"  type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-col>
            </el-row>

        </el-header>

        <!--指标-->
        <el-container>
            <el-main>

                <el-tag type="info" class="zhibiao">关键指标</el-tag>
                <el-row class="block-col-2">
                    <el-col :span="4" class="borderThree" style="width:20%">
                        <el-badge value="pv" class="item">
                            <div class="vctext">浏览次数</div>
                        </el-badge>
                        <div class="vcnum">{{text_pv}}</div>
                    </el-col>
                    <el-col :span="4" class="borderThree" style="width:20%">
                        <el-badge value="uv" class="item">
                            <div class="vctext">独立访客</div>
                        </el-badge>
                        <div class="vcnum">{{text_uv}}</div>
                    </el-col>
                    <el-col :span="4" class="borderThree" style="width:20%">
                        <div class="vctext">IP</div>
                        <div class="vcnum">{{text_ips}}</div>
                    </el-col>
                    <el-col :span="4" class="borderThree" style="width:20%">
                        <div class="vctext">新独立访客</div>
                        <div class="vcnum">{{text_ov}}</div>
                    </el-col>

                    <el-col :span="4" class="borderThree" style="width:20%;border-right: 1px solid #f9f9f9;">
                        <div class="vctext">人均浏览页数</div>
                        <div class="vcnum">{{text_pc}}</div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>

        <!--折线图-->
        <el-container style="min-height: 300px">
            <el-main>
                <div id="chart1" style="min-height: 300px"></div>
            </el-main>
        </el-container>

        <!--table-->
        <el-container style="min-height: 300px">
            <el-main>
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="统计报表" name="count">
                            <el-table
                                    v-loading="loading"
                                    stripe
                                    ref="testTable"
                                    :data="tableData"
                                    size="small"
                                    style="width:100%"
                                    @selection-change="handleSelectionChange"
                                    @row-click="handleclick"
                                    :row-class-name = "tableRowClassName"
                            >

                                <el-table-column prop="day" label="时段"> </el-table-column>
                                <el-table-column prop="pv" label="浏览次数PV "> </el-table-column>
                                <el-table-column prop="uv" label="独立访客UV"></el-table-column>
                                <el-table-column prop="ip" label="IP"></el-table-column>
                                <el-table-column prop="ov" label="新独立访客" ></el-table-column>
                                <el-table-column prop="pc" label="人均浏览页数"></el-table-column>
                                <!--<el-table-column prop="num" label="平均访问深度"></el-table-column>-->

                            </el-table>


                        </el-tab-pane>
                        <el-tab-pane label="占比" name="rate">
                            <el-table
                                    v-loading="loading"
                                    stripe
                                    :data="rate_tableData"
                                    size="small"
                                    style="width:100%"
                                    @selection-change="handleSelectionChange"
                                    @row-click="handleclick"
                                    :row-class-name = "tableRowClassName"
                            >

                                <el-table-column prop="day" label="时段"> </el-table-column>
                                <el-table-column  label="浏览次数PV">
                                    <template slot-scope="scope">
                                        <div>
                                            <span style="z-index:2; position: relative;">{{ scope.row.pv}}</span>
                                            <div style="height: 16px; position: absolute; top: 10px; right: 10px; z-index: 1;" v-bind:style="{ backgroundColor:bcolor,width: scope.row.pv}"></div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="独立访客UV">
                                    <template slot-scope="scope">
                                        <span style="z-index:2; position: relative;">{{ scope.row.uv}}</span>
                                        <div style="height: 16px; position: absolute; top: 10px; right: 10px; z-index: 1;" v-bind:style="{ backgroundColor:bcolor,width: scope.row.uv}"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="IP">
                                    <template slot-scope="scope">
                                        <span style="z-index:2; position: relative;">{{ scope.row.ip}}</span>
                                        <div style="height: 16px; position: absolute; top: 10px; right: 10px; z-index: 1;" v-bind:style="{ backgroundColor:bcolor,width: scope.row.ip}"></div>

                                    </template>
                                </el-table-column>
                                <el-table-column  label="新独立访客" >
                                    <template slot-scope="scope">
                                        <span style="z-index:2; position: relative;">{{ scope.row.ov}}</span>
                                        <div style="height: 16px; position: absolute; top: 10px; right: 10px; z-index: 1;" v-bind:style="{ backgroundColor:bcolor,width: scope.row.ov}"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="人均浏览页数">
                                    <template slot-scope="scope">
                                       <!-- <div v-bind:style="{ backgroundColor:bcolor,width: scope.row.pc}">{{ scope.row.pc}}</div>-->
                                        <div>{{ scope.row.pc}}</div>
                                    </template>
                                </el-table-column>

                            </el-table>

                        </el-tab-pane>

                    </el-tabs>
                </template>
            </el-main>
        </el-container>
    </el-container>

</template>


<script>
    import Cookies from 'js-cookie';
    export default {
        name: 'home',
        data () {
            return {
                bcolor:'#c9dfeb',
                s_date: '',
                pv:'0',
                uv:'0',
                ov:'0',
                ips:'0',
                pc:'0',//pv/uv
                text_pv:'-',
                text_uv:'-',
                text_ov:'-',
                text_ips:'-',
                text_pc:'-',//pv/uv
                days:['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00'],
                pv_nums:['0','0','0','0','0','0','0','0','0','0','0','0'],
                uv_nums:['0','0','0','0','0','0','0','0','0','0','0','0'],
                ip_nums:['0','0','0','0','0','0','0','0','0','0','0','0'],
                options: [],//域名列表
                activeName:'count',
                curSiteId: '',
                pickerOptions2: {
                    shortcuts: [{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//往前推一天
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },  {
                        text: '近14天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '近30天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 181);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                //表格当前页数据
                tableData: [],
                rate_tableData:[],
                //多选数组
                multipleSelection: [],
                //下拉菜单选项
                select: '',
                //默认每页数据量
                pagesize: 10,
                //默认高亮行数据id
                highlightId: -1,
                //当前页码
                currentPage: 1,
                //查询的页码
                start: 1,
                //默认数据总数
                totalCount: 0,

            }
        },
        methods:{
            dateChange:function () {
                //alert(this.s_date+'日期选择完后');
                //日期选择后
                this.getTotalList();

            },

            siteChange:function () {
                this.getTotalList();
                //alert(this.curSiteId);
            },
            //多选响应
            handleSelectionChange: function(val) {
                this.multipleSelection = val;
            },

            //点击行响应
            handleclick: function(row, event, column){
                this.highlightId = row.id;
            },

            //改变当前点击的行的class，高亮当前行
            tableRowClassName: function(row, index){
                if(row.id == this.highlightId)
                {
                    return 'info-row';
                }
            },

            //每页显示数据量变更
            handleSizeChange: function(val) {
                this.pagesize = val;
                this.loadData(this.searchParam.s_date, this.currentPage, this.pagesize);
            },

            //页码变更
            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.loadData(this.searchParam.s_date, this.currentPage, this.pagesize);
            },
            getSiteList:function () {
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                this.$axios.post('/site/getSiteList',params).then((res)=> {
                    let list = res.data.list;
                    for(let i=0;i<list.length;i++){
                        this.options.push({"value":list[i].id,"label":list[i].siteName+"-"+list[i].siteHome});
                    }
                    if(list.length>0){
                        this.curSiteId=list[0].id;
                    }

                });

            },
            getTotalList:function () {
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                params.append("siteid",this.curSiteId);
                params.append("date",this.s_date);
                let myChart1 = this.$echarts.init(document.getElementById('chart1'));
                myChart1.showLoading({color:'#409eff'});
                this.$axios.post('/da/getTotalList',params).then((res)=> {
                    this.pv=res.data.pv;
                    this.uv=res.data.uv;
                    this.ov=res.data.ov;
                    this.ips=res.data.ip;
                    this.pc=res.data.pc;

                    this.text_pv=add_comma_toThousands(this.pv);
                    this.text_uv=add_comma_toThousands(this.uv);
                    this.text_ov=add_comma_toThousands(this.ov);
                    this.text_ips=add_comma_toThousands(this.ips);
                    this.text_pc=add_comma_toThousands(this.pc);
                    let pvList = res.data.pvList;
                    let uvList = res.data.uvList;
                    let ipList = res.data.ipList;
                    let ovList = res.data.ovList;

                    if(pvList.length>0){
                        this.days=[];
                        this.pv_nums=[];
                        this.uv_nums=[];
                        this.ip_nums=[];
                        this.tableData=[];
                        this.rate_tableData=[];

                        for(let i=0;i<pvList.length;i++){
                            this.days.push(pvList[i].day);
                            this.pv_nums.push(pvList[i].count);
                            this.uv_nums.push(uvList[i].count);
                            this.ip_nums.push(ipList[i].count);

                            //table数据
                            let pvnum=parseFloat(pvList[i].count);
                            let uvnum=parseFloat(uvList[i].count);
                            let pc=0;
                            if(uvnum>0){
                                pc=(pvnum/uvnum).toFixed(2);
                            }
                            this.tableData.push({"day":pvList[i].day,"pv":pvList[i].count,"uv":uvList[i].count,"ip":ipList[i].count,"ov":ovList[i].count,"pc":pc});
                            let pv_rate=percentNum(pvList[i].count,this.pv);

                            let uv_rate=percentNum(uvList[i].count,this.uv);
                            let ov_rate=percentNum(ovList[i].count,this.ov);
                            let ip_rate=percentNum(ipList[i].count,this.ips);


                            this.rate_tableData.push({"day":pvList[i].day,"pv":pv_rate,"uv":uv_rate,"ip":ip_rate,"ov":ov_rate,"pc":pc});
                        }
                    }

                    let option = {
                        title: {
                            text: '指标分析',
                            textStyle: {
                                fontWeight: 'normal',
                                color: '#1790cf'          // 主标题文字颜色
                            }
                        },
                        tooltip: { trigger: 'axis'},
                        //图例名
                        legend: {
                            data:['浏览次数PV','独立访客UV','IP']
                            //x: 'right'
                        },
                        grid: {
                            left: '1%',   //图表距边框的距离
                            right: '2%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:  this.days,
                            //坐标轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#666'
                                }
                            },
                        },
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    //formatter: '{value}'
                                    formatter: function(value,index){
                                        var value;
                                        if (value >=1000) {
                                            value = value/1000+'k';
                                        }else if(value <1000){
                                            value = value;
                                        }
                                        return value
                                    }
                                },
                                axisLine: {show: false },
                                axisTick: {show: false},
                            }
                        ],
                        series: [
                            {
                                name:'浏览次数PV',
                                type:'line',
                                data:this.pv_nums,
                                /*markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },*/
                                /*markLine : {
                                    data : [
                                        {type : 'average', name: '平均值'}
                                    ]
                                }*/
                            },
                            {
                                name:'独立访客UV',
                                type:'line',
                                data:this.uv_nums,
                                /*markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },*/
                            },
                            {
                                name:'IP',
                                type:'line',
                                data:this.ip_nums,
                                /*markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },*/
                            }]
                    };
                    myChart1.setOption(option);
                    myChart1.hideLoading();

                });
            },
            loadData:function () {
                alert('加载table数据');
            }
        },
        mounted(){
            let userid = Cookies.get('xbsj_userid');
            this.userid = userid;
            //加载站点列表
            this.getSiteList();
            //加载折线图数据
            this.getTotalList();

        }
    }



    //每隔三位小数加逗号
    function add_comma_toThousands(num) {
        var num = (num || 0).toString();
        var result = '';
        while (num.length > 3) {
            result = ',' + num.slice(-3) + result;
            num = num.slice(0, num.length - 3);
        }
        if (num) { result = num + result; }
        return result;
    }


    function toDecimal2(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
            return false;
        }
        var f = Math.round(x * 100) / 100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
            rs = s.length;
            s += '.';
        }
        while (s.length <= rs + 2) {
            s += '0';
        }
        return s;
    }

    function percentNum(num,num2) {
        if(num2>0){
            return (Math.round(num / num2 * 10000) / 100.00 + "%"); //小数点后两位百分比
        }else{
            return '0%';
        }

    }

</script>

<style>
 .borderThree{border-left:1px solid #f9f9f9;
     border-bottom:1px solid #f9f9f9;
     border-top:1px solid #f9f9f9;
     padding: 30px;
 }

.vctext{
    font-size: 12px;
    padding-bottom: 12px;
    padding-right: 9px;
}

.vcnum{
     font-size: 30px;
     font-weight: bold;
 }
.zhibiao{
    width: 100%;
    border-radius: 0px;
    border-bottom: 0px;
    font-size: 14px;
    color: #666;
    font-weight: bold;
    padding-left: 18px;
    padding-bottom: 35px;
    padding-top: 6px;
    background: #f9f9f9;
    border-color: #f9f9f9;
}

</style>